<template>
  <el-container class="container">
    <el-main>
      <el-row justify="center">
        <div id="testTitle">simbot老鸭粉丝汤交流品鉴会准入测试</div>
      </el-row>
      <el-row justify="center">
        说明：试题以基础题为主，包含部分知识题，总分 {{ maxScore }} 分，及格分为 {{ passScore }} 分，共 {{ questionTotal }} 题。
        <br/>若常识题有答错，即使及格，也将判定为未通过哦。祝你好运！
      </el-row>
      <br/>
      <el-form>
        <el-form-item v-for="(question, index) in questions" :key="index" style="margin-bottom: 0">
          <el-row style="text-align: left">
            <el-col>
              <el-tag>{{ question['questionGroupType'] }}</el-tag>&nbsp;
              <el-tag type="success">{{ question['questionGroupName'] }}</el-tag>&nbsp;
              <el-tag type="info">{{ question['score'] }} 分</el-tag>&nbsp;
            </el-col>
            <el-col>
              {{ index + 1 }}.{{ convertType(question.type) }}{{
                question.title
              }}{{ question['remark'] !== null && question['remark'] !== '' ? '注：' + question['remark'] : '' }}
              <div style="text-align: center">
                <el-checkbox-group v-if="question.type === 1" v-model="form.answers[index].userAnswer">
                  <el-checkbox v-for="(option, index) in question.options" :key="index"
                               :label="option.order.toString()">
                    {{ option.content }}
                  </el-checkbox>
                </el-checkbox-group>
                <el-radio-group v-else-if="question.type === 0" v-model="form.answers[index].userAnswer[0]">
                  <el-radio v-for="(option, index) in question.options" :key="index" :label="option.order.toString()">
                    {{ option.content }}
                  </el-radio>
                </el-radio-group>
                <el-radio-group v-else v-model="form.answers[index].userAnswer[0]">
                  <el-radio label="0">错</el-radio>
                  <el-radio label="1">对</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSubmit" :loading="loading">提交</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import { showTest, submitTest } from '@/api/test'
import { reactive, ref } from 'vue'
import { ElLoading, ElMessageBox } from 'element-plus'

const convertType = (type: number) => {
  switch (type) {
    case 0:
      return '（单选）'
    case 1:
      return '（多选）'
    case 2:
      return '（判断）'
  }
}
const loading = ref(false)
const route = useRoute()
const router = useRouter()
const maxScore = ref(null)
const passScore = ref(null)
const questionTotal = ref(null)
const questions = ref()
const testId = ref(null)
const form: any = reactive({
  testId: 0,
  answers: []
})
const loadingInstance = ElLoading.service({ fullscreen: true })
showTest(route.query.testId).then(resp => {
  const testInfo = resp.data.data
  testId.value = testInfo.testId
  maxScore.value = testInfo.maxScore
  passScore.value = testInfo.passScore
  questionTotal.value = testInfo.questionTotal
  questions.value = testInfo.questions
  form.testId = testInfo.testId
  for (const question of testInfo.questions) {
    form.answers.push({
      questionId: question.questionId,
      userAnswer: []
    })
  }
}).finally(() => {
  loadingInstance.close()
})
const doSubmit = () => {
  ElMessageBox.confirm(
    '请确保所有题目均已填写完毕',
    '确认提交',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    loading.value = true
    submitTest(form).then(resp => {
      router.push({
        name: 'Result',
        params: {
          pass: resp.data.data.pass,
          score: resp.data.data.score,
          code: resp.data.data.code,
          msg: resp.data.msg
        }
      })
    }).finally(() => {
      loading.value = false
    })
  })
}
</script>

<style scoped>
#testTitle {
  font-size: 40px;
  padding-bottom: 10px;
}

.container {
  margin: auto;
  width: 70%;
}
</style>
